<template>
  <div>
    <el-form label-width="120px"  size="mini" :model="dataForm">
      <el-row>
        <el-col :span="12">
          <el-form-item label="话题名称：">
            <el-input v-model="dataForm.name" ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10" :offset="2">
          <el-button size="mini" type="primary" @click="query">查询</el-button>
          <el-button size="mini" @click="refresh">重置</el-button>
        </el-col>
      </el-row>
    </el-form>
    <el-table
      @row-click="handleRowClick"
      highlight-current-row
      ref="tableData" :data="tableData" style="width: 100%">
      <el-table-column prop="pic" label="banner图片" width="180">
        <template slot-scope="scope">
          <img :src="scope.row.pic" style="width: 100px;height: 100px"/>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="banner名称" min-width="180">
      </el-table-column>
      <el-table-column prop="releaseTime" label="发布时间" width="180">
      </el-table-column>
      <el-table-column label="操作" width="50">
        <template slot-scope="scope">
          <el-radio :disabled ="isExists(scope.row.id)" v-model="radio" @click="handleRowClick(scope.row)" :label="scope.row.id">{{''}}</el-radio>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      layout="total, prev, pager, next, jumper,sizes"
      @current-change="refreshPageRequest"
      :current-page="pageRequest.pageNum"
      :page-size="pageRequest.pageSize"
      :total="totalSize"
      style="text-align: right;"
      :page-sizes="[10, 20, 30, 40]"
      @size-change="handleSizeChange"
    ></el-pagination>
  </div>
</template>
<script>
  export default {
    name: "LiveBannerInfoTable",
    components: {
    },
    data() {
      return {
        dataForm:{},
        tableData:[],
        totalSize: 0,
        // 分页信息
        pageRequest: {
          pageNum: 1,
          pageSize: 10
        },
        radio:null
      }
    },
    mounted: function () {

    },
    methods: {
      // 初始化
      init() {
        let this_ = this;
        this.dataForm.pageNum = this.pageRequest.pageNum;
        this.dataForm.pageSize = this.pageRequest.pageSize;
        this.utils.request.liveRequest({
          url: '/api/v1/liveBannerInfo/canList',
          method: 'get',
          params: this.dataForm
        }).then(result => {
          let data = result.data;
          if (data && data.code === '0') {
            this_.tableData = data.data.rows;
            this_.totalSize = data.data.total;
            this_.$forceUpdate();
          } else {
            this_.tableData = []
          }
        })
      },
      query() {
        this.pageRequest.pageNum = 1;
        this.init();
      },
      // 刷新
      refresh() {
        this.dataForm = {};
        this.tableData = [];
        this.totalSize = 0;
        this.pageRequest = {
          pageNum: 1,
          pageSize: 10
        }
        this.radio = null
        this.init();
      },
      // 换页刷新
      handleSizeChange: function (pageSize) {
        this.pageRequest = {
          pageNum: 1,
          pageSize: pageSize
        }
        this.init();
      },
      refreshPageRequest(pageNum) {
        this.pageRequest.pageNum = pageNum;
        this.init();
      },
      handleRowClick(row) {
        if(this.$parent.$parent.$parent.isExists(row.id)){
          return
        }
        this.radio = row.id
        this.$emit("selectionChange", row);
      },
      isExists(id) {
        return this.$parent.$parent.$parent.isExists(id);
      }
    }
  }
</script>
<style scoped lang="scss">

</style>
